import { WINDOW_HEIGHT, WINDOW_WIDTH } from '@/scripts/args'
import { drawRound } from '@/scripts/graphics'

export default function View (ctx, config) {
  this.ctx = ctx
  Object.assign(this, config.scene)
}

View.prototype = {
  renderObject (color, x, y, width = this.size, height = this.size) {
    this.ctx.fillStyle = color
    this.ctx.fillRect(x * width, y * height, width, height)
  },
  renderObjects (color, objects) {
    this.ctx.fillStyle = color
    for (let { x, y } of objects) {
      this.ctx.fillRect(x * this.size, y * this.size, this.size, this.size)
    }
  },
  renderFoods (foods) {
    this.ctx.fillStyle = this.foodColor
    for (let { x, y } of foods) {
      drawRound(this.ctx, this.foodColor, x * this.size, y * this.size, this.size)
    }
  },
  renderGates (gates) {
    this.ctx.fillStyle = this.gateColor
    for (let { position: { x, y } } of gates) {
      this.ctx.fillRect(x * this.size, y * this.size, this.size, this.size)
    }
  },
  renderTraps (traps) {
    this.ctx.fillStyle = this.trapColor
    for (let { x, y } of traps) {
      this.ctx.fillRect(x * this.size, y * this.size, this.size, this.size)
    }
  },
  renderWalls (walls) {
    this.ctx.fillStyle = this.wallColor
    for (let { x, y } of walls) {
      this.ctx.fillRect(x * this.size, y * this.size, this.size, this.size)
    }
  },
  init () {
    // console.log('init game')
    this.renderObject(this.backgroundColor, 0, 0, WINDOW_WIDTH, WINDOW_HEIGHT)
  },
  drawSnake (snake) {
    // console.log('start render snake')
    /*
      snake body
     */
    const body = snake.body
    this.renderObjects(this.snakeBodyColor, body)
    /*
      snake head
     */
    const x = snake.head.x
    const y = snake.head.y
    this.renderObject(this.snakeHeadColor, x, y, this.size, this.size)
  },
  drawFoods (foods) {
    this.renderFoods(foods)
  },
  drawGates (gates) {
    this.renderGates(gates)
  },
  drawWalls (walls) {
    this.renderWalls(walls)
  },
  drawTraps (traps) {
    this.renderTraps(traps)
  },
  drawLines (){
    const ctx = this.ctx
    const size = this.size
    ctx.strokeStyle = '#fff'
    const count = WINDOW_WIDTH / this.size
    for (let i = 1; i < count; i++) {
      ctx.moveTo( i * size, 0);//画竖线
      ctx.lineTo(i * size, WINDOW_HEIGHT);
      ctx.stroke();
      ctx.moveTo(0, i * size);//画横线
      ctx.lineTo(WINDOW_WIDTH, i * size);
      ctx.stroke();
    }
  },
  loadConfig (config) {
    Object.assign(this, config)
  }
}
